<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超级管理员</title>

    <link rel="stylesheet" href="../../../../bangnuo/css/operation/add_merchants_new.css">

    <script src="../../../../bangnuo/vue/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../../../bangnuo/bootstrap/js/jquery-3.4.1.js"></script>
    <script src="../../../../bangnuo/vue/axios.min.js"></script>
    <script type="module" src="../../operation/js/config/public.js"></script>
    <style>
        .main-body{
            width: 80%;
            margin: 0 auto;
        }
        .input-header{
            margin: 0px auto;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 158px;
            height: 158px;
            line-height: 158px;
            text-align: center;
        }
        .avatar {
            width: 158px;
            height: 158px;
            display: block;
        }

        .label-title-bottom{
            height: auto;
            margin-bottom:20px
        }

        .span-font-color{
            color: #409EFF
        }

    </style>
</head>
<body>
<div id="app">
    <div class="main-body">
    <div class="input-header">
        <el-row>
            <el-steps :space="200" :active="4" finish-status="success">
                <el-step title="主体信息"></el-step>
                <el-step title="经营信息"></el-step>
                <el-step title="结算规则"></el-step>
                <el-step title="结算账户"></el-step>
                <el-step title="超级管理员"></el-step>
                <el-step title="保存完成"></el-step>
            </el-steps>
        </el-row>
        <el-row style="width: 500px;margin-top: 40px">
            <el-form ref="form" :model="form" label-width="100px" label-position="left" width="50%">

                <el-form-item label="超管身份">
                    <el-radio v-model="adminClassType"  label="0">法定代表人/经营者</el-radio>
                    <el-radio v-model="adminClassType" label="1">负责人</el-radio>
                </el-form-item>

                <el-form-item v-if="adminClassType == '0'" label="开户名称">
                    <span>aaaaa</span>
                </el-form-item>

                <el-form-item v-else label="开户名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item v-if="adminClassType == '0'" label="超管资料类型">
                    <el-radio v-model="adminInfo" label="0" disabled>证件类型</el-radio>
                    <el-radio  v-model="adminInfo" label="1" disabled>公众号openid</el-radio>
                </el-form-item>

                <el-form-item v-else label="超管资料类型">
                    <el-radio v-model="adminInfo" label="0" >证件类型</el-radio>
                    <el-radio  v-model="adminInfo" label="1" >公众号openid</el-radio>
                </el-form-item>

                <el-form-item v-if="adminClassType == '0'" v-else label="证件号码">
                    aaaaaa
                </el-form-item>
                <el-form-item v-if="adminClassType != '0' && adminInfo==0" label="证件号码">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item v-if="adminClassType != '0' && adminInfo==1" label="微信号openid">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item  label="手机号">
                    <el-input  v-model="form.name">
                        <template slot="prepend">+86</template>
                    </el-input>
                </el-form-item>

                <el-form-item  label="邮箱">
                    <el-input  v-model="form.name"></el-input>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="retreat">上一步</el-button>
                    <el-button type="primary" @click="onSubmit">确认保存</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</div>

</div>
<script type="module">
    import bnApi from '../../operation/js/config/public.js';
    var vue = new Vue({
        el: '#app',
        data: {
            autoUpload: true,
            validityOfCertificate:'0',//证件有效期
            validityOfCertificate1:'0',//证件有效期
            appIdClass:'0',//公众号appId分类
            appAppIdClass:'0',//app appId分类
            smallAppIdClass:'0',//小程序appId分类
            adminClassType:'0',//超级管理员身份选择
            adminInfo:'0',
            form: {
                name: '',
                owner: '',
                idDocType:'',
                idType:'',
                salesScenesType:[],
                bankAccountType:''//账户类型
            },
            img:""
        },
        methods: {
            onSubmit() {
                console.log('submit!');
                location.href = "add_merchants_wx5.html";
            },
            retreat(){
                location.href = "add_merchants_wx3.html";
            },
            handleAvatarSuccess(){

            },
            beforeAvatarUpload(){
                // 可以在tomcat的conf的web.xml中找到相对应的文件类型
                var isJPG = file.type === 'image/jpeg'||'image/gif'||'image/png';

                var isLt2M = file.size / 1024 / 1024 < 4;
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 4MB!');
                }
                return isJPG && isLt2M;
            },
            salesScenes(){
                console.log("经营场景类型",this.form.salesScenesType);
            }
        },
        mounted(){

        }
    })
</script>
</body>


</html>